<template>

	<dynamicLi :showUserInfo="false" :flat="true" :border="true" :showComment="false" v-if="Data.dynamicInfoShow"
		:data="Data.data" @clickFover="clickForver" @clickReport="clickReport"></dynamicLi>
		
	<FoverList :list="Data.data.fover.fover_user_list"></FoverList>
	
	<view class="dynamic-comment-total">
		<text>{{Data.data.comment_number || 0}} 评论</text>
	</view>

	<CommentList :AvatarSize="AvatarSize" :list="Data.Reply.list" @clickDeleteComment="clickDeleteComment"
		@clickComment="clickComment" @clickFoverComment="clickFoverComment" @clickReply="clickReply"
		@ClickFoverReply="ClickFoverReply" @clickLookReply="clickLookReply"></CommentList>
		
	<view class="bottom-comment">
		<input type="text" v-model="Data.Comment.value" :placeholder="CommentInputPlaceholder"
			class="bottom-comment-input" />
		<view class="bottom-comment-send" @click="SendComment">
			发送
		</view>
	</view>
</template>
<script setup>
	import {
		getCurrentInstance,
		reactive,
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import FoverList from '../components/fover_list/fover_list.vue'
	import CommentList from '../components/comment_list/comment_list.vue'
	import useTrendsStore from '@/stores/store/trends.js'
	const TrendsStore = useTrendsStore()
	import dynamicLi from '@/components/dynamic_li/dynamic_li.vue'
	import userName from '@/components/user_name_text/user_name_text'
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	const AvatarSize = ref(70)
	// 回复评论按钮禁用状态
	const CommentSendButtonDisable = computed(() => Boolean(!Data.Comment.value))
	// 回复评论框提示文本
	const CommentInputPlaceholder = computed(() => {
		return ""
	})
	const Data = reactive({
		dynamicInfoShow: false,
		mode: null,
		data: {},
		userInfo: {},
		Reply: {
			page: null,
			pages: null,
			limit: null,
			list: []
		},
		Comment: {
			dynamic_id: null,
			dynamic_user: null,
			comment_top_id: "",
			value: "",
			image: "",
			reply_comment: null,
			reply_user: null
		}
	})
	onLoad(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('GetDynamicInfo', (pageParmas) => {
			uni.showLoading({
				title: "加载信息中"
			})
			let {
				data,
				mode
			} = pageParmas

			let {
				userInfo
			} = data
			let {
				nickname
			} = userInfo
			Data.userInfo = userInfo
			Data.inputPlaceholder = nickname
			Data.data = data
			Data.mode = mode
			if (Data?.data?.id) {
				Data.dynamicInfoShow = true
			}
			TrendsStore.DynamicInfo({
					id: Data.data.id
				})
				.then(result => {
					let id = Data.data.id
					let ReplyPage = Data.Reply.page
					let ReplyLimit = Data.Reply.limit
					return TrendsStore.DynamicReplyList({
						id,
						page: ReplyPage,
						limit: ReplyLimit
					})
				}).then(CommentResult => {
					let CommentData = CommentResult.data
					let {
						page,
						pages,
						limit,
						list
					} = CommentData
					Data.Reply.page++
					Data.Reply.pages = pages
					Data.Reply.limit = limit
					Data.Reply.list.push(...list)
					return TrendsStore.DynamicFoverList({
						id: Data.data.id
					})
				})
				.then(FoverResult => {
					uni.hideLoading()
					console.log(FoverResult);
				})
				.catch((error) => {
					uni.hideLoading()
				})
		})
	})
	// 发布评论
	function SendComment() {
		TrendsStore.CommentDynamic(Data.Comment).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}
	// 点击返回
	function clickBack() {
		uni.navigateBack()
	}
	// 点击举报
	function clickReport(item, index) {
		TrendsStore.Report().then(r => {
			console.log(r);
		}).catch(err => {
			console.log(err);
		})
	}
	// 删除评论
	function clickDeleteComment(e) {
		console.log("点击删除评论", e);
	}
	// 点击回复
	function clickReply(e) {
		console.log("点击回复");
		console.log(e);
	}
	// 点赞回复
	function ClickFoverReply(e) {
		console.log("点赞回复");
		console.log(e);
	}
	// 点击评论
	function clickComment(e) {
		console.log("点击评论");
		console.log(e);
	}
	// 点赞评论
	function clickFoverComment(e) {
		console.log("点赞评论");
		console.log(e);
	}
	// 点击查看评论
	function clickLookReply(e) {
		console.log(e);
		let {
			id,
			dynamic_id,
			comment_top_id,
			dynamic_user
		} = e
		let {
			page,
			pages,
			limit
		} = e.Reply
		TrendsStore.DynamicCommentReplyList({
				id,
				page,
				pages,
				limit,
				dynamic_id,
			})
			.then(res => {
				console.log(res);
				let {
					data
				} = res

				let {
					list
				} = data
				e.Reply.list.push(...list)
			}).catch(err => {
				console.log(err);
			})
	}

	function clickForver() {
		TrendsStore.DynamicFover(Data.data)
	}
</script>

<style scoped>
	.trends-list-li-content {
		padding: 0rpx;
	}

	.trends-header {
		padding: 20rpx 25rpx;
		display: flex;
		gap: 28rpx;
	}

	.trends-header-left {
		display: flex;
		align-items: center;
	}

	.trends-header-right {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.trends-header-right-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user-introduce {
		font-size: 20rpx;
	}

	.dynamic-fover-total,
	.dynamic-comment-total {
		padding: 8rpx 35rpx;
		margin-top: 0rpx;
		color: gray;
		font-size: 25rpx;
	}
	.bottom-comment {
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 100rpx;
		border: 1rpx solid #dfdada6b;
		left: 0px;
		background: white;
		padding: 15rpx 25rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.bottom-comment-input {
		width: 75%;
		height: 100%;
		border-radius: 40rpx;
		background: #ebebeb;
		text-indent: 25rpx;
		font-size: 25rpx;
		transition: width linear 200ms;
	}
	.bottom-comment-send {
		background-color: steelblue;
		border-radius: 10rpx;
		text-align: center;
		display: flex;
		font-size: 25rpx;
		color: white;
		width: 110rpx;
		align-items: center;
		justify-content: center;
	}
</style>